<template>
  <el-container
    :style="{ height: screenHeight - 100 + 'px'}"
    style="height: 500px; border: 1px solid #eee"
  >
    <!-- 类别数据 v-if="typeOptions != '' "-->
    <el-aside width="200px" style="background-color: #FFFFFF; padding:0px">
      <el-input
        v-model="typeName"
        placeholder="请输入类别名称"
        clearable
        size="small"
        prefix-icon="el-icon-search"
        style="margin: 20px 0 10px 0;"
      />
      <el-tree
        :style="{ height: screenHeight - 200 + 'px'}"
        :data="typeOptions"
        :props="defaultProps"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        ref="tree"
        :default-expand-all="false"
        :highlight-current="true"
        accordion
        expand-on-click-node
        @node-click="handleNodeClick"
      />
    </el-aside>
    <el-main style="padding:0px">
      <component :is="comName" :subData="subData"></component>
    </el-main>
  </el-container>
</template>

<script>
import { treeselect, getType, getFlagType } from "@/api/system/type";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import ArchFileA from "./ArchFileA";
import ArchFile from "./ArchFile";
import { listTable } from "@/api/tool/table";

export default {
  name: "Archives",
  components: {
    Treeselect,
    ArchFileA,
    ArchFile
  },
  data() {
    return {
      // 类别名称
      typeName: undefined,
      // 分类表格数据
      typeOptions: undefined,
      // 查询可用状态类别参数
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 默认显示组件名称
      comName: null,
      // 用于查询业务数据的类型id
      typeId: null,
      // 子组件数据
      subData: null
    };
  },
  /**************************js部分*************************/
  created() {
    // 获取树形菜单数据
    this.getTreeselect();
  },
  watch: {
    // 根据名称筛选类别树
    typeName(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    screenHeight() {
      return document.documentElement.clientHeight;
    }
  },
  methods: {
    /** 获取左侧树形菜单结构数据 */
    getTreeselect() {
      treeselect({ status: "0" }).then(response => {
        this.typeOptions = response.data;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      if (data.children === undefined) {
        // 尾部分类
        // 1.获取上级第一个建表flag为1的分类id，和一级菜单全宗号
        getFlagType({ typeId: data.id }).then(response => {
          this.typeId = data.id;
          this.getListTable(response.data.typeId);
        });
      }
    },
    // 获取表集合
    getListTable(tb_typeId) {
      listTable({ typeId: tb_typeId }).then(response => {
        let tableList = response.rows;
        // 跳转组件
        // 1. 长度为0，未建表
        // 2. 长度为1，并且表类型为3，跳转独立文件组件
        // 3. 否则，跳转案卷案卷-卷内组件
        // tbType 表类型。1：案卷管理表，2：卷内文件表，3：独立文件表
        if (tableList.length == 0) {
          this.$modal.msgWarning("该分类下未建表");
        } else if (tableList.length == 1 && tableList[0].tbType === "1") {
          this.$modal.msgWarning("已建案卷表，未建卷内表！");
        } else if (tableList.length == 1 && tableList[0].tbType === "3") {
          // 独立文件
          this.subData = {
            typeId: this.typeId,
            tableList: tableList
          };
          this.comName = "ArchFileA";
        } else if (
          // 案卷卷内文件
          tableList.length == 2 &&
          tableList[0].tbType === "1" &&
          tableList[1].tbType === "2"
        ) {
          this.subData = {
            typeId: this.typeId,
            tableList: tableList
          };
          this.comName = "ArchFile";
        } else {
          this.$modal.msgWarning("案卷-卷内表异常！");
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 树形结构内容太长背景色覆盖不全 */
.el-tree > :nth-child(n+1) {
	display: inline-block;
     min-width: 100%;
}

</style>

